<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>流量监控</title>
    <#include "/header.html">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">

</head>
<script src="${request.contextPath}/statics/js/transData.js"></script>
<script src="${request.contextPath}/statics/js/echarts.min.js"></script>
<body>

<style>

    #refreshs{
        position:fixed;
        top: 200px;

        width: 220px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius:5px 0 0 5px;
        background: #ffffff;
        padding: 10px 5px;
        z-index: 999;
    }
    .arrows{
        position: absolute;
        left: -41px;
        top: 4px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
        background: #62a6f5;
        cursor: pointer;
    }
    .refreshss{
        cursor: pointer;
        background: #62a6f5;
        position: absolute;
        left: -41px;
        top: 44px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
    }
    .exportBtn{
        padding: 6px 10px;
        background-color: #0C0C0C;
        color: #fff;
        font-size: 14px;
        border-radius: 2px;
        margin-left: 20px;
        cursor: pointer;
    }
</style>
<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="netrafficPage.refresh()"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <form class="layui-form" action="">
        <div class="row" style="margin-bottom: 10px;border-top:none;padding: 20px 2px 0px 2px; ">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="请选择时间" autocomplete="off" id="date">
            </div>
        </div>
    </form>
</div>
<div class="panel panel-default container-fluid">
    <div class="row chartsBox" style="padding-top: 20px;">
        <#if shiro.hasPermission("data:returns:indexOdds")>
        <div class="col-md-6 chartCon">
            <div id="allPlatfrom" class="chartStyle"></div>
            <div class="chartText">
                <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日此时总计">昨
                </i>
                <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
                <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="bottom" title="今日此时总计">今
                </i>
                <span class="valColor tCurrentTotal todayStyle2">暂无</span>
                <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日总计">总
                </i>
                <span class="valColor yTotal totalStyle2">暂无</span>
                <i class="tipLogo ratioStyle1" data-toggle="tooltip" data-placement="bottom" title="比例">比
                </i>
                <span class="valColor  ratio totalStyle2">暂无</span>
                <#if shiro.hasPermission("data:returns:indexOdds_exprot")>
                <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
                </#if>
            </div>
        </div>
    </#if>
    <#if shiro.hasPermission("data:returns:pageOdds")>
        <div class="col-md-6 chartCon">
            <div id="allPlatfrom2" class="chartStyle"></div>
            <div class="chartText">
                <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日此时总计">
                    昨
                </i>
                <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
                <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="bottom" title="今日此时总计">
                    今
                </i>
                <span class="valColor tCurrentTotal todayStyle2">暂无</span>
                <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日总计">
                    总
                </i>
                <span class="valColor yTotal totalStyle2">暂无</span>

                <i class="tipLogo ratioStyle1" data-toggle="tooltip" data-placement="bottom" title="比例">
                    比
                </i>
                <span class="valColor ratio totalStyle2">暂无</span>
                <#if shiro.hasPermission("data:returns:pageOdds_exprot")>
                <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
            </#if>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:returns:indexDomain")>
        <div class="col-md-6 chartCon">
            <div id="allPlatfrom3" class="chartStyle"></div>
            <div class="chartText">
                <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日此时总计">
                    昨
                </i>
                <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
                <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="bottom" title="今日此时总计">
                    今
                </i>
                <span class="valColor tCurrentTotal todayStyle2">暂无</span>
                <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日总计">
                    总
                </i>
                <span class="valColor yTotal totalStyle2">暂无</span>
                <#if shiro.hasPermission("data:returns:indexDomain_exprot")>
                <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
            </#if>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:returns:indexDomain")>
        <div class="col-md-6 chartCon">
            <div id="allPlatfrom4" class="chartStyle"></div>
            <div class="chartText">
                <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日此时总计">
                    昨
                </i>
                <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
                <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="bottom" title="今日此时总计">
                    今
                </i>
                <span class="valColor tCurrentTotal todayStyle2">暂无</span>
                <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="bottom" title="昨日总计">
                    总
                </i>
                <span class="valColor yTotal totalStyle2">暂无</span>
                <#if shiro.hasPermission("data:returns:pageDomain_exprot")>
                <span class="exportBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
            </#if>
            </div>
        </div>
</#if>
    </div>

</div>
</body>
<script type="text/javascript">
     $(function () {
         netrafficPage.init();
         netrafficPage.fixedBox();
     });

     var _date = "";
     var startTimes = gettime(1);
     var  endTimes = gettime(0);
     function gettime(num){
         var _thisdate =new Date() - (1000*60 *60 *24*num)
         var date = new Date(_thisdate);
         var seperator1 = "-";
         var year = date.getFullYear();
         var month = date.getMonth() + 1;
         var strDate = date.getDate();
         if (month >= 1 && month <= 9) {
             month = "0" + month;
         }
         if (strDate >= 0 && strDate <= 9) {
             strDate = "0" + strDate;
         }
         var currentdate = year + seperator1 + month + seperator1 + strDate;
         return currentdate;
     }
     function setParams() {
         if(_date){
             console.log(_date);
             var selectTime = _date.split(' - ');
             startTimes = selectTime[0];
             endTimes = selectTime[1];
         }else{
             startTimes = gettime(1);
             endTimes = gettime(0);
         }
         var params = {
             beforeTime:startTimes,
             afterTime:endTimes
         };
         var minData;
         var maxData;
         if(params.startDate>params.endDate){
             maxData = params.startDate;
             minData = params.endDate;
             params.endDate = maxData;
             params.startDate = minData;
         }
         return params;
     }
     var netrafficPage = {
         init:function () {
             var _this = this;

             _this.showToptip();
             _this.getIp(startTimes,endTimes);
         },
         refresh:function () {
             var _this = this;
             setParams();
             _this.getIp(startTimes,endTimes);
         },
         getIp:function (b,a) {

             var _this = this;
             var data = setParams();
             indexloading = layer.load(2)
             ajaxc({
                 permit:'data:returns:indexOdds',
                 type: "POST",
                 url: baseURL+"baidureturn/findIndexReturnData",
                 data: JSON.stringify(data),
                 contentType:'application/json',
                 dataType:'json',
                 success: function(result){
                     layer.close(indexloading);
                     if(result.code == 0){
                         //console.log(result.result)

                         _this.commonOption("allPlatfrom","首页到达率",result.result,b,a);
                         $("#allPlatfrom").siblings(".chartText").find(".tCurrentTotal").text(transData(result.result.todayNowCount));
                         $("#allPlatfrom").siblings(".chartText").find(".yCurrentTotal").text(transData(result.result.yesterdayNowCount));
                         $("#allPlatfrom").siblings(".chartText").find(".yTotal").text(transData(result.result.yesterdayTotalCount));
                         $("#allPlatfrom").siblings(".chartText").find(".ratio").text(transData(result.result.indexArriveRate)+'%');

                         $("#allPlatfrom").siblings(".chartText").find(".yesterdayStyle1").text(b).attr('data-original-title',b+' 日此时总计 '+result.result.yesterdayNowCount);
                         $("#allPlatfrom").siblings(".chartText").find(".todayStyle1").text(a).attr('data-original-title',a + ' 日此时总计 '+result.result.todayNowCount)
                         $("#allPlatfrom").siblings(".chartText").find(".totalStyle1").text(b).attr('data-original-title',b + ' 日总计 '+result.result.yesterdayTotalCount)
                         $("#allPlatfrom").siblings(".chartText").find(".ratioStyle1").attr('data-original-title','比例:'+result.result.indexArriveRate + '<br>UV:' + result.result.uvCount + '<br>总站点ip:'+result.result.totalSiteIpCount)

                     }else{
                         layer.msg(result.msg,function(){
                             //关闭后的操作
                         });
                     }
                 }
             });

             ajaxc({
                 permit:'data:returns:pageOdds',
                 type: "POST",
                 url: baseURL+"baidureturn/findInnerReturnData",
                 data: JSON.stringify(data),
                 contentType:'application/json',
                 dataType:'json',
                 success: function(result){
                     layer.close(indexloading);
                     if(result.code == 0){

                         _this.commonOption("allPlatfrom2","内页到达率",result.result,b,a);

                         $("#allPlatfrom2").siblings(".chartText").find(".tCurrentTotal").text(transData(result.result.todayNowCount));
                         $("#allPlatfrom2").siblings(".chartText").find(".yCurrentTotal").text(transData(result.result.yesterdayNowCount));
                         $("#allPlatfrom2").siblings(".chartText").find(".yTotal").text(transData(result.result.yesterdayTotalCount));
                         $("#allPlatfrom2").siblings(".chartText").find(".ratio").text(transData(result.result.indexArriveRate)+'%');



                         $("#allPlatfrom2").siblings(".chartText").find(".yesterdayStyle1").text(b).attr('data-original-title',b + ' 日此时总计 '+result.result.yesterdayNowCount);
                         $("#allPlatfrom2").siblings(".chartText").find(".todayStyle1").text(a).attr('data-original-title',a+ ' 日此时总计 '+result.result.todayNowCount)
                         $("#allPlatfrom2").siblings(".chartText").find(".totalStyle1").text(b).attr('data-original-title',b + ' 日总计 '+result.result.yesterdayTotalCount)
                         $("#allPlatfrom2").siblings(".chartText").find(".ratioStyle1").attr('data-original-title','比例:'+result.result.indexArriveRate + '<br>UV:' + result.result.uvCount + '<br>总站点ip:'+result.result.totalSiteIpCount)

                     }else{
                         layer.msg(result.msg,function(){
                             //关闭后的操作
                         });
                     }
                 }
             });
             ajaxc({
                 permit:'data:returns:indexDomain',
                 type: "POST",
                 url: baseURL+"domainsta/findHomeLockedDomain",
                 data: JSON.stringify(data),
                 contentType:'application/json',
                 dataType:'json',
                 success: function(result){
                     layer.close(indexloading);
                     if(result.code == 0){

                         _this.commonOption("allPlatfrom3","首页域名被封数",result.result,b,a);

                         $("#allPlatfrom3").siblings(".chartText").find(".tCurrentTotal").text(transData(result.result.todayNowCount));
                         $("#allPlatfrom3").siblings(".chartText").find(".yCurrentTotal").text(transData(result.result.yesterdayNowCount));
                         $("#allPlatfrom3").siblings(".chartText").find(".yTotal").text(transData(result.result.yesterdayTotalCount));
                         $("#allPlatfrom3").siblings(".chartText").find(".ratio").text(transData(result.result.indexArriveRate)+'%');



                         $("#allPlatfrom3").siblings(".chartText").find(".yesterdayStyle1").text(b).attr('data-original-title',b + ' 日此时总计 '+result.result.yesterdayNowCount);
                         $("#allPlatfrom3").siblings(".chartText").find(".todayStyle1").text(a).attr('data-original-title',a + ' 日此时总计 '+result.result.todayNowCount)
                         $("#allPlatfrom3").siblings(".chartText").find(".totalStyle1").text(b).attr('data-original-title',b + ' 日总计 '+result.result.yesterdayTotalCount)
                         $("#allPlatfrom3").siblings(".chartText").find(".ratioStyle1").attr('data-original-title','比例:'+result.result.indexArriveRate + '<br>UV:' + result.result.uvCount + '<br>总站点ip:'+result.result.totalSiteIpCount)

                     }else{
                         layer.msg(result.msg,function(){
                             //关闭后的操作
                         });
                     }
                 }
             });
             ajaxc({
                 permit:'data:returns:pageDomain',
                 type: "POST",
                 url: baseURL+"domainsta/findInnerLockedDomain",
                 data: JSON.stringify(data),
                 contentType:'application/json',
                 dataType:'json',
                 success: function(result){
                     layer.close(indexloading);
                     if(result.code == 0){//登录成功
                         _this.commonOption("allPlatfrom4","内页域名被封数",result.result,b,a);

                         $("#allPlatfrom4").siblings(".chartText").find(".tCurrentTotal").text(transData(result.result.todayNowCount));
                         $("#allPlatfrom4").siblings(".chartText").find(".yCurrentTotal").text(transData(result.result.yesterdayNowCount));
                         $("#allPlatfrom4").siblings(".chartText").find(".yTotal").text(transData(result.result.yesterdayTotalCount));



                         $("#allPlatfrom4").siblings(".chartText").find(".yesterdayStyle1").text(b).attr('data-original-title',b + ' 日此时总计 '+result.result.yesterdayNowCount);
                         $("#allPlatfrom4").siblings(".chartText").find(".todayStyle1").text(a).attr('data-original-title',a+ ' 日此时总计 '+result.result.todayNowCount)
                         $("#allPlatfrom4").siblings(".chartText").find(".totalStyle1").text(b).attr('data-original-title',b + ' 日总计 '+result.result.yesterdayTotalCount)

                     }else{
                         layer.msg(result.msg,function(){
                             //关闭后的操作
                         });
                     }
                 }
             });
         },
         fixedBox:function () {
             var _this = this;
             $('.arrows').click(function(){
                 if($('#refreshs').css('right')=='0px'){
                     $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                     $('#refreshs').animate({
                         right:'-220px'
                     })
                 }else{
                     $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                     $('#refreshs').animate({
                         right:'0px'
                     })
                 }

             });
             layui.use(['form','laydate'], function() {
                 var form = layui.form;
                 var laydate = layui.laydate;
                 laydate.render({
                     elem: '#date',
                     position: 'fixed',
                     range: true,
                     done: function (value, date, endDate) {
                         _date = value;
                         _this.refresh();
                     }
                 });
               });
             $('#date').val(gettime(1)+' - '+gettime(0));
         },
         showToptip:function () {
             $('[data-toggle="tooltip"]').tooltip({
                 html:true
             });
         },
         setHours:function () {
             var hours = [];
             for (var i=0;i<24;i++){
                 if(i<10){
                     hours.push(0 + '' + i + ':00');
                 }else{
                     hours.push(i + ':00');
                 }

             };
             //console.log(hours);
             return hours;
         },
         commonOption:function (id,title,seriesData,b,a) {
             var _this = this;
             // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById(id));
             // console.log(myChart)
             // 指定图表的配置项和数据
             var option = {
                 title: {
                     text: title
                 },
                 tooltip: {
                     trigger: 'axis',
                     formatter:function (params) {
                         //console.log(params,'22222');
                         var data;
                         var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                         var perHtml = '';
                         if(params.length > 1){
                             data = calPercent(params[1].value,params[0].value);
                            // console.log(data);
                             if(data.perType == 1){
                                 perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                             }else if(data.perType == 2){
                                 perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                             }

                         }
                        // console.log(perHtml);
                         params.map(function (item) {
                             if(item.seriesName == a){
                                 html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + '日 : ' + addSplit(item.value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                             }else{
                                 html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + '日 : ' + addSplit(item.value) + '<br/>';
                             }
                         });
                         return html;
                     },
                     axisPointer: {
                         type: 'cross',
                         label: {
                             backgroundColor: '#6a7985',
                             formatter:function (params) {
                                 return parseFloat(params.value).toFixed(0)
                             }
                         }
                     }
                 },
                 color:['#2ec770','#1c97f5'],
                 legend: {
                     data:[b,a],
                     left: '50%'
                 },
                 grid: {
                     left: '40px',
                     right: '4%',
                     top:'90px',
                     bottom:'3%',
                     containLabel: true
                 },
                 toolbox: {
                     feature: {
                         saveAsImage: {}
                     }
                 },
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
                     name:'时间',
                     nameLocation:'start',
                     axisLabel: {
                         showMaxLabel: true
                     },
                     axisPointer:{
                         label:{
                             formatter:function (params) {
                                 // console.log(params.value);
                                 var val  = params.value;
                                 return params.value + " ~ " + params.value.split(":")[0] + ":59";
                             }
                         }
                     },
                     data:seriesData.hourList
                 },
                 yAxis: {
                     type: 'value',
                     name:'数量'
                 },
                 series: [
                     {
                         name:b,
                         type:'line',
                         lineStyle:{
                             color:'#2ec770'
                         },
                         smooth: true,
                         data:seriesData.yesterdayCount
                     },
                     {
                         name:a,
                         type:'line',
                         areaStyle: {},
                         lineStyle:{
                             color:'#1c97f5'
                         },
                         smooth: true,
                         data:seriesData.todayCount
                     }
                 ]
             };

             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option,true);

         },
         allPlatfromIp:function (b,a) {
             var _this = this;
              _this.commonOption("allPlatfrom","所有平台IP总量",ipDetail.totalIp,b,a);
             $("#allPlatfrom").siblings(".chartText").find(".tCurrentTotal").text(transData(ipDetail.totalIp.todayNowCount));
             $("#allPlatfrom").siblings(".chartText").find(".yCurrentTotal").text(transData(ipDetail.totalIp.yesterDayNowCount));
             $("#allPlatfrom").siblings(".chartText").find(".yTotal").text(transData(ipDetail.totalIp.yesterDayTotalCount));

             $("#allPlatfrom").siblings(".chartText").find(".yesterdayStyle1").text(b).attr('data-original-title',b+' 日此时总计 '+ ipDetail.totalIp.yesterDayTotalCount);
             $("#allPlatfrom").siblings(".chartText").find(".todayStyle1").text(a).attr('data-original-title',a+' 日此时总计 '+ipDetail.totalIp.todayNowCount);
             $("#allPlatfrom").siblings(".chartText").find(".totalStyle1").text(b).attr('data-original-title',b+' 日总计 '+ ipDetail.totalIp.yesterDayNowCount);
         },

         split_array: function (arr, len){
             var a_len = arr.length;
             var result = [];
             for(var i=0;i<a_len;i+=len){
                 result.push(arr.slice(i,i+len));
             }
             return result;
         }
     }
</script>
</html>